<template>
  <div class="page-permissions">
    <h2 class="section-title">页面交互权限设置</h2>
    
    <el-card class="permission-card">
      <el-form label-position="top">
        <!-- 复制粘贴权限 -->
        <el-form-item label="复制粘贴权限">
          <div class="permission-item">
            <div class="permission-header">
              <span class="permission-name">允许复制粘贴</span>
              <el-switch
                v-model="copyPasteEnabled"
                @change="updateCopyPastePermission"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </div>
            
            <div class="permission-description">
              <p>控制用户是否可以在页面上使用复制、剪切和粘贴功能</p>
              <div v-if="!copyPasteEnabled" class="permission-message">
                <el-input
                  v-model="copyPasteMessage"
                  placeholder="禁用时显示的提示信息"
                  @blur="updateCopyPasteMessage"
                >
                  <template #append>
                    <el-button @click="updateCopyPasteMessage">更新</el-button>
                  </template>
                </el-input>
              </div>
            </div>
          </div>
        </el-form-item>
        
        <!-- 右键菜单权限 -->
        <el-form-item label="右键菜单权限">
          <div class="permission-item">
            <div class="permission-header">
              <span class="permission-name">允许右键菜单</span>
              <el-switch
                v-model="contextMenuEnabled"
                @change="updateContextMenuPermission"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </div>
            
            <div class="permission-description">
              <p>控制用户是否可以使用浏览器右键菜单</p>
              <div v-if="!contextMenuEnabled" class="permission-message">
                <el-input
                  v-model="contextMenuMessage"
                  placeholder="禁用时显示的提示信息"
                  @blur="updateContextMenuMessage"
                >
                  <template #append>
                    <el-button @click="updateContextMenuMessage">更新</el-button>
                  </template>
                </el-input>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    
    <!-- 用户角色权限设置 -->
    <el-card class="permission-card mt-4">
      <div class="card-header">
        <h3>用户角色权限</h3>
        <p class="text-gray-500">设置不同用户角色的权限</p>
      </div>
      
      <el-table :data="rolePermissions" border style="width: 100%">
        <el-table-column prop="role" label="角色" width="120">
          <template #default="scope">
            <el-tag :type="getRoleTagType(scope.row.role)">{{ scope.row.roleName }}</el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="copyPaste" label="复制粘贴" width="120" align="center">
          <template #default="scope">
            <el-checkbox 
              v-model="scope.row.permissions.copyPaste" 
              @change="updateRolePermission(scope.row.role, 'copyPaste', scope.row.permissions.copyPaste)"
            />
          </template>
        </el-table-column>
        
        <el-table-column prop="contextMenu" label="右键菜单" width="120" align="center">
          <template #default="scope">
            <el-checkbox 
              v-model="scope.row.permissions.contextMenu" 
              @change="updateRolePermission(scope.row.role, 'contextMenu', scope.row.permissions.contextMenu)"
            />
          </template>
        </el-table-column>
        
        <el-table-column prop="description" label="角色描述">
          <template #default="scope">
            {{ scope.row.description }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { usePermissionStore } from '../../../store/permission';

// 获取权限Store
const permissionStore = usePermissionStore();

// 复制粘贴权限
const copyPasteEnabled = ref(true);
const copyPasteMessage = ref('');

// 右键菜单权限
const contextMenuEnabled = ref(true);
const contextMenuMessage = ref('');

// 角色权限数据
const rolePermissions = ref([
  { 
    role: 'admin', 
    roleName: '管理员', 
    permissions: { copyPaste: true, contextMenu: true },
    description: '管理员拥有所有权限'
  },
  { 
    role: 'editor', 
    roleName: '编辑者', 
    permissions: { copyPaste: true, contextMenu: true },
    description: '可以编辑内容但无管理权限'
  },
  { 
    role: 'user', 
    roleName: '普通用户', 
    permissions: { copyPaste: true, contextMenu: true },
    description: '已登录的普通用户'
  },
  { 
    role: 'guest', 
    roleName: '访客', 
    permissions: { copyPaste: true, contextMenu: true },
    description: '未登录的访问者'
  }
]);

// 初始化数据
onMounted(() => {
  // 初始化复制粘贴权限
  copyPasteEnabled.value = permissionStore.canCopyPaste;
  copyPasteMessage.value = permissionStore.copyPasteDisabledMessage;
  
  // 初始化右键菜单权限
  contextMenuEnabled.value = permissionStore.canUseContextMenu;
  contextMenuMessage.value = permissionStore.contextMenuDisabledMessage;
  
  // 初始化角色权限
  initRolePermissions();
});

// 初始化角色权限
const initRolePermissions = () => {
  const roles = permissionStore.$state.roles.permissions;
  
  rolePermissions.value.forEach(role => {
    const rolePerms = roles[role.role] || [];
    role.permissions.copyPaste = rolePerms.includes('copyPaste');
    role.permissions.contextMenu = rolePerms.includes('contextMenu');
  });
};

// 更新复制粘贴权限
const updateCopyPastePermission = (value) => {
  permissionStore.setCopyPastePermission(value);
  ElMessage({
    type: value ? 'success' : 'warning',
    message: value ? '已启用复制粘贴功能' : '已禁用复制粘贴功能'
  });
};

// 更新复制粘贴禁用提示信息
const updateCopyPasteMessage = () => {
  permissionStore.setCopyPastePermission(copyPasteEnabled.value, copyPasteMessage.value);
  ElMessage({
    type: 'success',
    message: '已更新复制粘贴禁用提示信息'
  });
};

// 更新右键菜单权限
const updateContextMenuPermission = (value) => {
  permissionStore.setContextMenuPermission(value);
  ElMessage({
    type: value ? 'success' : 'warning',
    message: value ? '已启用右键菜单功能' : '已禁用右键菜单功能'
  });
};

// 更新右键菜单禁用提示信息
const updateContextMenuMessage = () => {
  permissionStore.setContextMenuPermission(contextMenuEnabled.value, contextMenuMessage.value);
  ElMessage({
    type: 'success',
    message: '已更新右键菜单禁用提示信息'
  });
};

// 更新角色权限
const updateRolePermission = (role, permType, enabled) => {
  // 获取当前角色的所有权限
  const currentPermissions = [...permissionStore.$state.roles.permissions[role] || []];
  
  if (enabled) {
    // 添加权限
    if (!currentPermissions.includes(permType)) {
      currentPermissions.push(permType);
    }
  } else {
    // 移除权限
    const index = currentPermissions.indexOf(permType);
    if (index !== -1) {
      currentPermissions.splice(index, 1);
    }
  }
  
  // 更新权限store
  permissionStore.$patch({
    roles: {
      permissions: {
        [role]: currentPermissions
      }
    }
  });
  
  // 如果当前角色是激活的角色，需要更新权限状态
  if (permissionStore.currentRole === role) {
    permissionStore.updatePermissionsByRole();
  }
  
  ElMessage({
    type: 'success',
    message: `已${enabled ? '添加' : '移除'}${role}角色的${permType === 'copyPaste' ? '复制粘贴' : '右键菜单'}权限`
  });
};

// 获取角色标签类型
const getRoleTagType = (role) => {
  switch (role) {
    case 'admin': return 'danger';
    case 'editor': return 'warning';
    case 'user': return 'success';
    case 'guest': return 'info';
    default: return '';
  }
};
</script>

<style scoped>
.page-permissions {
  padding: 20px 0;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  color: #1e293b;
}

.permission-card {
  margin-bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.permission-item {
  padding: 16px;
  border-radius: 8px;
  background-color: #f8fafc;
  margin-bottom: 16px;
}

.permission-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.permission-name {
  font-size: 1rem;
  font-weight: 500;
}

.permission-description {
  color: #64748b;
  font-size: 0.875rem;
}

.permission-message {
  margin-top: 12px;
}

.card-header {
  margin-bottom: 16px;
}

.card-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.mt-4 {
  margin-top: 1rem;
}

.text-gray-500 {
  color: #64748b;
}
</style> 